<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .pp-table {
        width: 500px;
        border: 2px solid #000;
        text-align: center;
        margin-bottom: 100px;
      }
    </style>
</head>
<body>
    <div id="app">
        <pp-table :data='list'>
            <template v-slot:default='obj'> 
                <button @click='del(obj.row.id)'>删除</button>
            </template>
        </pp-table>

        <pp-table :data='arr'>
            <button>修改</button>
        </pp-table>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 作用域插槽：定义插槽的同时，是可以提供数据的，提供的数据可以提供分发内容时使用
        // 1.给插槽以添加属性的方式传值
        //    <slot money="100" :row="item" :index="index"></slot>
        // 2.所有添加的属性，都会收集到一个对象中去
        //   {money: 100, row:{ 行的数据 }, index:下标}
        // 3.在分发时，就可以通过template = 接收

        // 自己封装一个简易表格组件
        // 1.pp-table组件，需要接收一个data属性，将基于这个data属性，会渲染表格
        // 2.pp-table，通过作用域插槽，可以接收到money,row,index
        Vue.component('pp-table',{
            template: `
            <table class='pp-table'>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年纪</th>
                <th>描述</th>
                <th>操作</th>
              </tr>   
              <tr v-for='(item,index) in data' :key='item.id'>
                 <td>{{ index + 1 }}</td>
                 <td>{{ item.name }}</td>  
                 <td>{{ item.age }}</td>  
                 <td>{{ item.desc }}</td>  
                 <td>
                   <slot name='default' money='100' :row='item' :index='index'></slot>   
                 </td>
              </tr>
            </table>
            `,
            props: ['data']
        })
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue',
                list: [
                   { id: 1, name: '老王', age: 18, desc: '隔壁老王'},
                   { id: 2, name: '老黄', age: 18, desc: '老王隔壁'},
                   { id: 3, name: '老苟', age: 18, desc: '老黄隔壁'},
                ],
                arr: [
                   { id: 1, name: '苹果', age: 18, desc: '好吃' },
                   { id: 2, name: '鸭梨', age: 30, desc: '不错' },
                   { id: 3, name: '菠萝', age: 19, desc: '真香' }
                ]
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id != id)
                }
            }
        })
    </script>
</body>
</html>